<template>
    <section>

        <!--高级查询工具条-->
        <el-col :span="24" class="toolbar" style="padding-bottom: 0px;">
            <el-form :inline="true" :model="filters">
                <el-form-item>
                    <el-input v-model="filters.title" placeholder="标题"></el-input>
                </el-form-item>
                <el-form-item>
                    <el-button type="primary" v-on:click="getUsers">查询</el-button>
                </el-form-item>
            </el-form>
        </el-col>

        <!--列表-->
        <el-table :data="pendingMessage"  v-loading="listLoading" @selection-change="selsChange" style="width: 100%;">
            <el-table-column type="selection" width="55">
            </el-table-column>
            <el-table-column type="index" width="60">
            </el-table-column>
            <!--<el-table-column prop="id" label="ID"  >-->
            <!--</el-table-column>-->
            <el-table-column prop="title" label="标题"   >
            </el-table-column>
            <el-table-column prop="name" label="宠物名字"   >
            </el-table-column>
            <el-table-column prop="price" label="宠物价格"   >
            </el-table-column>
            <el-table-column prop="age" label="宠物年龄"  >
            </el-table-column>
            <el-table-column prop="coatColor" label="宠物毛色"  >
            </el-table-column>
            <el-table-column prop="type.name" label="宠物类型"  >
            </el-table-column>
            <el-table-column prop="address" label="上门收购地址"  >
            </el-table-column>
            <el-table-column label="用户"  >
                <template scope="scope">
                    <span>{{scope.row.user.username||scope.row.user.phone||scope.row.user.email}}</span>
                </template>
            </el-table-column>
            <el-table-column prop="gender" label="宠物性别" >
                <template scope="scope">
                    <span v-if="scope.row.gender == 1" >公</span>
                    <span v-else-if="scope.row.gender == 0" >母</span>
                </template>
            </el-table-column>
            <el-table-column label="操作" width="150">
                <template scope="scope">
                    <el-button size="small" @click="handleDealwith(scope.$index, scope.row)">处理</el-button>
                </template>
            </el-table-column>
        </el-table>

        <!--分页工具条-->
        <el-col :span="24" class="toolbar">
            <el-pagination layout="prev, pager, next" @current-change="handleCurrentChange" :page-size="pigeSize" :total="total" style="float:right;">
            </el-pagination>
        </el-col>

        <!--编辑添加界面-->
        <!--intro:"",//宠物介绍
        adoptNotice:""//领养须知-->
        <el-dialog title="处理寻主信息" :visible.sync="dialogFormVisible">
            <el-form :model="form" :rules="rules" ref="form">
                <el-form-item label="用户名" prop="username">
                    <el-input v-model="form.username" autocomplete="off" :disabled="true"></el-input>
                </el-form-item>
                <el-form-item label="宠物类型" prop="typeName" >
                    <el-input v-model="form.typeName" autocomplete="off" :disabled="true"></el-input>
                </el-form-item>
                <el-form-item label="宠物名" prop="name" >
                    <el-input v-model="form.name" autocomplete="off" :disabled="true"></el-input>
                </el-form-item>
                <el-form-item label="成本价" prop="costprice" >
                    <el-input v-model="form.costprice" autocomplete="off" :disabled="true"></el-input>
                </el-form-item>
                <el-form-item label="宠物性别" prop="gender">
                    <el-input v-model="form.gender==1?'公':'母'" autocomplete="off" :disabled="true"></el-input>
                </el-form-item>
                <el-form-item label="请选择支付类型" >
                    <el-select v-model="form.paytype" placeholder="请选择支付类型">
                        <el-option label="垫付" value="1"></el-option>
                        <el-option label="银行卡转账" value="2"></el-option>
                    </el-select>
                </el-form-item>
                <el-form-item label="售价" prop="saleprice" >
                    <el-input v-model="form.saleprice" autocomplete="off"></el-input>
                </el-form-item>
                <el-form-item label="宠物介绍" prop="intro" >
                    <quill-editor :options="editorOption" v-model="form.intro">
                    </quill-editor>
                </el-form-item>
                <el-form-item label="领养须知" prop="adoptNotice" >
                    <quill-editor :options="editorOption" v-model="form.adoptNotice">
                    </quill-editor>
                </el-form-item>
                <el-form-item prop="logo" label="宠物图片">
                    <el-upload
                            class="upload-demo"
                            action="/api/fastdfs/upload"
                            :on-remove="handleRemove"
                            :on-success="handleSuccess"
                            :file-list="fileList"
                            list-type="picture">
                        <el-button size="small" type="primary">点击上传</el-button>
                        <div slot="tip" class="el-upload__tip">只能上传jpg/png文件，且不超过500kb</div>
                    </el-upload>
                </el-form-item>
            </el-form>
            <div slot="footer" class="dialog-footer">
                <el-button @click="dialogFormVisible = false">取 消</el-button>
                <el-button type="primary" @click="addsj" >确 定</el-button>
            </div>
        </el-dialog>

    </section>
</template>

<script>
    //引入富文本框
    import { quillEditor } from "vue-quill-editor"; //调用编辑器
    import 'quill/dist/quill.core.css';
    import 'quill/dist/quill.snow.css';
    import 'quill/dist/quill.bubble.css';
    import quillConfig from "../../common/js/quill-config"
    export default{
        //申明组件
        components: {
            quillEditor//quillEditor:quillEditor
        },
        data(){
            return{
                //校验
                rules: {
                    name: [
                        {required: true, message: '请输入部门名称', trigger: 'blur'},
                    ],
                },
                editorOption:quillConfig,
                pendingMessage:[],
                //加载框 true为显示
                listLoading:false,
                //批量选择的数据
                sels:[],
                //总条数
                total:0,
                //每页条数
                pigeSize:10,
                //当前页
                currentPage:1,
                //高级查询
                filters:{
                    title:'',
                    state:0,
                },
                //选择启用禁用 单选框
                radio: '',
                //添加修改模态框默认false关闭
                dialogFormVisible:false,
                //添加修改模态框中的数据
                form:{
                    id:"",      //当前寻主信息的id
                    userid:'',//用户id
                    username:"",//用户名
                    typeName:"",//类型
                    typeId:"",
                    name:"",//宠物名
                    saleprice:"",//售价
                    costprice:"",//成本价
                    gender:'',//宠物性别
                    intro:"",//宠物介绍
                    adoptNotice:"",//领养须知
                    paytype:"1",  //默认是1，为垫付
                },
                fileList:[],//存放图片
            }
        },methods:{
            addsj(){
                //封装type
                let type = {"id":this.form.typeId,"name":this.form.typeName};
                this.form.type = type;
                //封装user
                let user = {"id":this.form.userid,"username":this.form.username}
                this.form.user = user;
                //封装detail
                let detail = {"intro":this.form.intro,"adoptNotice":this.form.adoptNotice};
                this.form.detail = detail;
                //封装searchMasterMsg
                let searchMasterMsg = {"id":this.form.id};
                this.form.searchMasterMsg = searchMasterMsg;
                this.$refs["form"].validate((valid) => {    //判断是否必填项输入值
                    if (valid) {
                        //发送请求
                        this.$http.put("/pet/pendingMessage/",this.form).then(res=>{
                            let {message,success} = res.data;
                            if(success){
                                this.loadDept();
                                //关闭添加修改框
                                this.dialogFormVisible = false;
                            }
                        }).catch()
                    }
                });
                console.debug(this.form)
            },
            //移除图片
            handleRemove(){},
            //添加图片
            handleSuccess(){},
            //发送查询请求
            getUsers(){
                // console.debug(this.radio)
                //改变当前页
                this.currentPage = 1;
                this.loadDept();
            },
            //点击前面复选框触发
            selsChange(rows){
                console.debug(rows);
                this.sels = rows;
            },
            //改变当前页触发
            handleCurrentChange(val){
                this.currentPage = val;
                this.loadDept();
            },
            //处理触发
            handleDealwith(index,row){
                this.dialogFormVisible = true;
                if(this.$refs["form"]){     //判断是否校验有值，有值才清空
                    this.$refs["form"].resetFields();
                }
                //回显寻主信息id
                this.form.id = row.id;
                //回显用户id
                this.form.userid = row.user.id;
                //回显
                this.form.username = row.user.username||row.user.phone||row.user.email;
                //回显宠物类型
                this.form.typeId = row.type.id;
                this.form.typeName = row.type.name;
                //回显宠物名
                this.form.name = row.name;
                //回显成本价
                this.form.costprice = row.price;
                //回显宠物性别
                this.form.gender = row.gender;
                //默认处理支付方式为垫付
                this.form.paytype = "1";
                console.debug(row.gender);
            },
            //发送请求
            loadDept(){
                let cx = {
                    //准备当前页和每页条数参数
                    state:this.radio,
                    pageSize:this.pigeSize,
                    currentPage:this.currentPage,
                    title:this.filters.title,
                    state:this.filters.state,
                };
                this.$http.post("/searchMasterMsg/pendingMessage",cx).then(res=>{
                    //console.debug(res);
                    //console.debug(res.data.totals)
                    this.pendingMessage = res.data.data;    //数据
                    this.total = res.data.totals;       //总条数
                })
            }
        },mounted(){    //钩子方法
            this.loadDept();
        }
    }
</script>